<template>
    <div ref="editMainRef" class="edit-main" @mousedown="onMousedown">
        <div class="app-phone" :style="phoneStyle">
            <template v-if="pageType === 2">
                <edit-main-page />
            </template>
            <template v-else-if="pageType === 3">
                <edit-main-module-page />
            </template>

            <div v-if="isDark" class="app-phone-dark"></div>
        </div>

        <!-- 设置面板 -->
        <edit-main-setting-pane />
        <!-- 量尺 -->
        <edit-main-ruler />
    </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import { useEditStore } from '@/store'
import { isDark } from '@/libs/dark'
import useWidget from '@/libs/edit/widgetData'
import EditMainPage from './components/edit-main-page'
import EditMainModulePage from './components/edit-main-module-page'
import EditMainRuler from './components/edit-main-ruler'
import EditMainSettingPane from './components/edit-main-setting-pane'
export default defineComponent({
    name: 'EditMain',
    components: {
        EditMainPage,
        EditMainModulePage,
        EditMainRuler,
        EditMainSettingPane
    },
    setup() {
        const editStore = useEditStore()

        const {
            onSelectWidget
        } = useWidget()

        const editMainRef = ref(null)
        
        const pageType = computed(() => editStore.pageType)
        const templateDrawerVisible = computed(() => editStore.templateDrawerVisible)

        const phoneZoom = computed(() => editStore.phoneZoom)
        const phoneStyle = computed(() => ({
            transform: `scale(${phoneZoom.value}) translate(-50%, -50%)`,
            zIndex: templateDrawerVisible.value ? 201 : 2
        }))

        let isMousedown = false
        const isTarget = e => (e.target === editMainRef.value) && (pageType.value === 2)
        const onMousedown = e => {
            if (!isTarget(e)) return
            isMousedown = true
            document.onmouseup = e => {
                if (isTarget(e) && isMousedown) {
                    isMousedown = false
                    onSelectWidget([])
                }
                document.onmouseup = null
            }
        }

        return {
            isDark,
            editMainRef,
            pageType,
            phoneStyle,

            onMousedown
        }
    }
})
</script>

<style lang="less" scoped>
@import './edit-main.less';
</style>